/** @jsxImportSource @emotion/react */
//入口的起始主页面；

import {  Global } from "@emotion/react";
import * as React from "react";
//import { Link as RouterLink } from "@reach/router";
//使用RouterLink不会强制刷新页面的。
import { Link as RouterLink } from "wouter";
import food from "./images/food.svg";
import {
  Navbar,
  Toolbar,
  Text, Button,
  useTheme,
  useResponsiveBodyPadding,
  Container,
　　　//这里sancho的Link等同于基础的<a><a/>，会跳转重新刷新页面；
  IconArrowRight, IconGift, IconTruck, IconPrinter, IconKey
} from "customize-easy-ui-component";
import { 首页末尾链接 } from "./comp/rootRarelyVary";

import cutting_board_knife from './images/cutting-board-knife.jpg';
import Link from "./routing/Link";



interface BrandingProps {
}
export const Branding: React.FunctionComponent<BrandingProps> = (props) => {
  const theme = useTheme();
 // const showingRecipe = props["*"];   　　 //"这个是问号前的除已预定义部分的剩余路径lo/gins/ds？
  console.log("路由进入Branding页面="+ JSON.stringify(props) );
  const responsiveBodyPadding = useResponsiveBodyPadding();

  return (
    <main>
      <Global
        styles={{
          html: {
            backgroundColor: theme.colors.background.tint1
          }
        }}
      />

        <Link to={`/todos`}>鼠标滑过链接加载代码</Link> <p></p>
        <Link to={`/test`}>详细的测试任务</Link>

      {首页末尾链接()}
    </main>
  );
};

//用于动态加载，缺省的
export default Branding;



//<Link  from "customize-easy-ui-component UI"是<a>跳转刷新=级别高的。而{Link as RouterLink }from "wouter @reach/router"是APP内部转移，节省资源=能保持context。
//css修饰体内部的 "& > div": { },  表示 当前元素的子代元素div，对它附加样式{ };
/*上面responsiveBodyPadding（内定好的空挡留白）带入的添加： 　{ padding-top:56px;} 　以及
  <style data-emotion="css">@media (min-width:768px){.css-adq7pz-Branding{padding-top:64px;}}</style>　顶部留出64px；分成两个尺寸。
*/
//模拟A4打印机窗口大小。A4，边距=无，缩放=默认。exact-width:595px; A4，边距=无，缩放=70%。exact-width:850px;不算大哦，差不多就是810px宽度。看着像1142px*1590px。
//打印机的所用代码宽度px实际很小的，没有缩放可能才600px的。["@media print and (min-width:551px)and (max-width:849px)"]: {display: "none",}
//<RouterLink   to="/device/">    <Button />  />   这里： 实际向Button会注入{ onClick=navigate(href) }； 估计useTouchable的bind导致异常。


